<template>
    <view class="cate">

        <view class="search">
            <view class="input">
                <text class="icon-search">女靴</text>
            </view>
        </view>

        <view class="categories">

            <scroll-view class="primary" scroll-y :style="{height:windowHeight+'px'}">
                <view v-for="(item, index) in cateList" :key="item.id" class="item" :class="{active:index===activeIndex}" @tap="changeActive(index as number)">
                    <text class="name">{{ item.name }}</text>
                </view>
            </scroll-view>

            <scroll-view class="secondary" scroll-y :style="{height:windowHeight+'px'}" :scroll-top="scrollTop">
                <view class="swiper">
                    <carousel :list="bannerList"></carousel>
                </view>
                <view class="panel" v-for="(item) in currentChildren" :key="item.id">
                    <view class="title">
                        <text class="name">{{ item.name }}</text>
                        <navigator class="more" hover-class="none">全部</navigator>
                    </view>
                    <view class="section">
                        <navigator v-for="(good) in item.goods" :key="good.id" class="goods" hover-class="none" :url="`/subPackages/detail/detail?id=${good.id}`">
                            <image class="image" :src="good.picture"></image>
                            <view class="name ellipsis">{{ good.name }}</view>
                            <view class="price">
                                <text class="symbol">¥</text>
                                <text class="number">{{ good.price }}</text>
                            </view>
                        </navigator>
                    </view>
                </view>
            </scroll-view>

        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import { onLoad } from "@dcloudio/uni-app";
import useCateStore from "@/pinia/modules/cateStore";
import useHomeStore from "@/pinia/modules/homeStore";
import Carousel from "@/components/carousel.vue";

const cateStore = useCateStore();

const homeStore = useHomeStore();

const { cateList } = storeToRefs(cateStore);

const { bannerList } = storeToRefs(homeStore);

const activeIndex = ref<number>(0);

const currentChildren = computed(() => cateList.value[activeIndex.value]?.children);

const { windowHeight } = uni.getSystemInfoSync();

const scrollTop = ref<number>(0);

/*获取分类的函数*/
const fetchCateList = async () => {
    try {
        await cateStore.fetchCateList();
    } catch (error: any) {
        await uni.showToast({ title: error.message, icon: "error", duration: 2000 });
    }
};

/*获取轮播图的函数*/
const fetchBanner = async () => {
    try {
        await homeStore.fetchBanner(2);
    } catch (error: any) {
        await uni.showToast({ title: error.message, icon: "error", duration: 2000 });
    }
};

/*修改高亮选项的回调函数*/
const changeActive = (index: number) => {
    activeIndex.value = index;
    scrollTop.value = Math.random();
};

onLoad(() => {
    fetchCateList();
    fetchBanner();
});

</script>


<style scoped lang="scss">
.cate {
    height: 100%;
    display: flex;
    flex-direction: column;

    .search {
        padding: 20rpx;
        background-color: #16c2a3;
        position: sticky;
        top: 0;
        z-index: 999;

        .input {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64rpx;
            padding-left: 26rpx;
            color: #8b8b8b;
            font-size: 28rpx;
            border-radius: 32rpx;
            background-color: #f3f4f4;
        }
    }

    .icon-search {
        &::before {
            margin-right: 10rpx;
        }
    }

    .categories {
        flex: 1;
        min-height: 400rpx;
        display: flex;
    }

    .primary {
        overflow: hidden;
        width: 180rpx;
        flex: none;
        background-color: #f6f6f6;

        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 96rpx;
            font-size: 26rpx;
            color: #595c63;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 42rpx;
                bottom: 0;
                width: 96rpx;
                border-top: 1rpx solid #e3e4e7;
            }
        }

        .active {
            background-color: #fff;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 8rpx;
                height: 100%;
                background-color: #27ba9b;
            }
        }
    }

    .primary .item:last-child::after, .primary .active::after {
        display: none;
    }

    .secondary {
        background-color: #fff;

        .carousel {
            height: 200rpx;
            margin: 0 30rpx 20rpx;
            border-radius: 4rpx;
            overflow: hidden;
        }

        .panel {
            margin: 0 30rpx 0rpx;
        }

        .title {
            height: 60rpx;
            line-height: 60rpx;
            color: #333;
            font-size: 28rpx;
            border-bottom: 1rpx solid #f7f7f8;

            .more {
                float: right;
                padding-left: 20rpx;
                font-size: 24rpx;
                color: #999;
            }
        }

        .more {
            &::after {
                font-family: 'erabbit' !important;
                content: '\e6c2';
            }
        }

        .section {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 20rpx 0;

            .goods {
                width: 140rpx;
                margin: 0rpx 30rpx 20rpx 0;

                &:nth-child(3n) {
                    margin-right: 0;
                }

                image {
                    width: 150rpx;
                    height: 150rpx;
                }

                .name {
                    padding: 5rpx;
                    font-size: 22rpx;
                    color: #333;
                }

                .price {
                    padding: 5rpx;
                    font-size: 18rpx;
                    color: #cf4444;
                    text-align: center;
                }

                .number {

                    font-size: 24rpx;
                    margin-left: 2rpx;
                }
            }
        }
    }

    .swiper {
        width: 100%;
        padding-top: 10rpx;
        /* #ifdef MP-WEIXIN */
        padding: 20rpx;
        /* #endif */

        :deep(.carousel) {
            height: 250rpx;
            border-radius: 10rpx;
        }
    }
}
</style>
